<template>
  <div class="home">
    <page-scroll :footer="true">
      <template #bg>
        <div class="bg"></div>
      </template>
      <template #content>
        <div class="head">
          <div class="">
            <div class="db" style="
                display: flex;
                align-items: center;
                justify-content: space-between;
              ">
              <div class="logo">
                <img src="@/assets/images/logo22.png"/>
              </div>
              <div class="lang">
                <img class="la1" @click="clear" src="@/assets/images/public/icon-clear.png"/>
                <img
                  class="la1"
                  @click="path_url('/my/download')"
                  src="@/assets/images/download.png"
                  alt=""
                />
                <img class="la1" @click="$router.push('/customer')" src="@/assets/images/Group9.png"/>
                <img
                  @click="path_url('/my/lang')"
                  src="@/assets/images/ico_lang.png"
                  alt=""
                />
              </div>
            </div>
          </div>
        </div>

        <div class="container">
          <!--      <div class="" @click="path_url('/invest/index')">跳转跳转跳转跳转</div>-->
          <div class="banner" v-if="bannerData.length != 0">
            <swiper ref="mySwiper" :options="swiperOptions2">
              <swiper-slide v-for="(item, k) in bannerData" :key="k">
                <div class="item" @click="path_url(item.forwardPath)">
                  <img :src="item.imgUrl"/>
                </div>
              </swiper-slide>
            </swiper>
            <div class="hd">
              <div class="swiper-hd"></div>
            </div>
          </div>
          <div class="notice">
            <img src="@/assets/images/ico_notice.png"/>
            <van-swipe class="notice-swipe" :autoplay="3000" :show-indicators="false" vertical>
              <van-swipe-item v-for="(item, k) in noticeData" :key="k" @click="pathNotice('/information/view', item)">
                <div class="overflow1">{{ item.title }}</div>
              </van-swipe-item>
            </van-swipe>
          </div>
          <ul class="nav2">
            <li v-for="(item, k) in navData" :key="k" @click="path_url(item.url)">
              <div class="ico"><img :src="item.img"/></div>
              <div class="n">{{ item.name }}</div>
            </li>
          </ul>
          <div class="data-wrapper">
            <div class="item-wrapper items-center">
              <div class="relative item">
                <img src="@/assets/images/home/Frame1420070797.png" alt="">
                <div class="data-content">
                  <div>
                    <div class="title" style="color:#7ea2a4;">{{ $t('new.doc1') }}</div>
                    <div class="value" style="color: #ff801c">{{ common.decal2(teamData.todayIncome) }} USDT</div>
                  </div>
                  <img src="@/assets/images/home/image5769.png" alt="">
                </div>
              </div>
              <div class="relative item">
                <img src="@/assets/images/home/Frame14200707972.png" alt="">
                <div class="data-content">
                  <div>
                    <div class="title" style="color: #0e2724">{{ $t('page3.doc59') }}</div>
                    <div class="value theme-color">{{ common.decal2(teamData.incomeAmount) }} USDT</div>
                  </div>
                  <img src="@/assets/images/home/aav.png" alt="">
                </div>
              </div>
            </div>
<!--            <div class="item-wrapper items-center" style="margin-top: 12px;">-->
<!--              <div class="relative item">-->
<!--                <img src="@/assets/images/home/Frame1420070797.png" alt="">-->
<!--                <div class="data-content">-->
<!--                  <div>-->
<!--                    <div class="title">{{ $t('page.所有任务') }}</div>-->
<!--                    <div class="value theme-color">123123 USDT</div>-->
<!--                  </div>-->
<!--                  <img src="@/assets/images/home/image5770.png" alt="">-->
<!--                </div>-->
<!--              </div>-->
<!--              <div class="relative item">-->
<!--                <img src="@/assets/images/home/Frame1420070797.png" alt="">-->
<!--                <div class="data-content">-->
<!--                  <div>-->
<!--                    <div class="title">{{ $t('page.今日任务') }}</div>-->
<!--                    <div class="value theme-color">123122342342343 USDT</div>-->
<!--                  </div>-->
<!--                  <img src="@/assets/images/home/image5730.png" alt="">-->
<!--                </div>-->
<!--              </div>-->
<!--            </div>-->
          </div>

<!--                    <HomeRouter/>-->
          <div class="videoList" v-for="(item2, k2) in movieList" :key="k2">
            <div class="cname flex">
              <div class="relative n flex1 items-center flex">
                <img class="mr-10" src="@/assets/images/home/yingshi-32.png" alt="">
                {{ item2.name }}
                <img class="line2 absolute" src="@/assets/images/home/line2.png" alt="">
              </div>
              <div
                class="v"
                @click="path_url('/home/list?id=' + item2.categoryId + '&title=' + item2.name)"
                style="color:#41F9B7;"
              >
                {{ $t("page1.doc41") }}
                <van-icon color="#B5B5B5" name="arrow"/>
              </div>
            </div>
            <div class="uilist">
              <ul class="list">
                <li v-for="(item, k) in item2.movieList" :key="k"
                    @click="checkLevel(item)">
                  <div class="pic">
                    <img v-lazy="item.coverUrl"/>
                  </div>
                  <div class="text-wrapper">
                    <div class="nowrap-1">{{ item.name }}</div>
                    <div class="flex justify-between items-center score">
                      <van-rate v-model="item.score" readonly color="#ffcd1e"/>
                    </div>
                    <div class="flex items-center justify-between score-wrapper">
                      <div class="score">{{ $t('page.score') }} {{ item.score }}</div>
                      <div class="like">{{ $t('page.like') }}</div>
                    </div>
                  </div>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </template>

      <!--理财订单到期提示复购弹窗-->
      <ExpirePop v-if="showFinancial"/>

      <!--      <van-popup v-model="isShowNotice" style="width: 7.2rem" :close-on-click-overlay="false">-->
      <!--        <div class="no_po">-->
      <!--          <div class="no_po-con-box">-->
      <!--            <div class="no_po-con" @click="path_url(forwardPath)">-->
      <!--              <img class="noticeImg" v-show="sShowNoticeImg" style="width: 100%" :src="sShowNoticeImg"/>-->
      <!--            </div>-->
      <!--          </div>-->

      <!--          <div class="close" v-show="showClose" :class="{noBorder:waitingTime<0}">-->
      <!--            <span v-if="waitingTime>=0">{{ waitingTime }}S</span>-->
      <!--            <img v-else-->
      <!--                 @click="handlerclose"-->
      <!--                 src="@/assets/images/ico_close.png"/>-->
      <!--          </div>-->
      <!--        </div>-->
      <!--      </van-popup>-->

      <template #footer>
        <glFooter :activeTitle="activeTitle"></glFooter>
      </template>
    </page-scroll>
  </div>
</template>
<script>
import {swiper, swiperSlide} from "vue-awesome-swiper";
import "swiper/css/swiper.css";
import {mapMutations} from "vuex";
import HomeRouter from "@/views/home/index/components/HomeRouter.vue";
import ExpirePop from "@/views/home/index/components/ExpirePop.vue";
import {bus} from "@/utils/http";

export default {
  data() {
    return {
      activeTitle: "home",
      titleLeft: this.$t("title.doc1"),
      showFinancial: false,
      bannerData: [],
      investData: [],
      swiperOptions2: {
        autoplay: true,
        pagination: {
          el: ".swiper-hd",
          clickable: true,
        },
        autoHeight: true,
        loop: true,
        loopedSlides: 1,
        slidesPerView: 1,
        spaceBetween: 0,
      },
      swiperOptions: {
        pagination: {
          el: ".swiper-pagination",
          clickable: true,
        },
        autoHeight: true,
        loop: false,
        loopedSlides: 1,
        slidesPerView: 1.4,
        spaceBetween: 0,
      },

      lefticon: require("../../../assets/images/ico_notice.png"),
      noticeData: [],
      category: [],
      movieList: [],

      serviceShow: true, // 理财开关
      navData: [
        {
          name: this.$t("page.充值资产"),
          url: "/wallet/recharge",
          img: require("@/assets/images/home/Rechargeassets.png"),
        },
        {
          name: this.$t("page.理财管理"),
          url: "/invest/index",
          img: require("@/assets/images/home/Myfinancialmanagement.png"),
        },
        {
          name: this.$t("page.doc98"),
          url: "/my/invite",
          img: require("@/assets/images/home/invitefriends.png"),
        },
        {
          name: this.$t("page.提现"),
          url: "/wallet/withdraw",
          img: require("@/assets/images/home/withdraw.png"),
        },
        {
          name: this.$t("page.使命中心"),
          url: "/task/index",
          img: require("@/assets/images/home/Missioncenter.png"),
        },
        {
          name: this.$t("page.会员中心"),
          url: "/income/index",
          img: require("@/assets/images/home/MemberCentre.png"),
        },

      ],
      isShowNotice: false, // 弹窗
      sShowNoticeImg: "",
      waitingTime: -1,
      showClose: false,
      forwardPath: '',
      mykf: "",
      financialData: [],
      levelData: [], // 等级数据
      teamData: {}
    };
  },
  components: {
    ExpirePop,
    HomeRouter,
    swiper,
    swiperSlide,
  },
  created() {
    this.getService();
    this.teamInfo()
  },
  mounted() {
    let _this = this;
    this.getAds();
    this.get_notice();
    this.getLevel()
    // this.getNotice();
    this.init();
    bus.$on("shownotice", function (data) {
      _this.getNotice();
    })
  },
  computed: {
    userData() {
      return this.$store.state.userData;
    },
  },
  methods: {
    ...mapMutations(["SET_IFRAME_SRC"]),
    teamInfo() {
      this.$post(this.URL.income.team, {}).then((res) => {
        if (res.code == 0) {
          this.teamData = res.data;
        } else {
          this.$toast(res.message);
        }
      });
    },
    handlerclose() {
      this.isShowNotice = false;
      this.showFinancial = true;
    },
    checkLevel(item) {
      // if (this.userData.level > -1) {
      //   let levelInfo = {}
      //   for (let i = 0; i < this.levelData.length; i++) {
      //     if (this.levelData[i].level == this.userData.level) {
      //       levelInfo = this.levelData[i]
      //       break;
      //     }
      //   }
      //if (levelInfo.incomeDailyCount - levelInfo.incomeDailyUseCount > 0) {
      this.path_url('/home/vrdetails?id=' + item.movieId)
      // } else {
      //   this.$toast(this.$t('new.doc51'))
      // }
      // } else {
      //   this.$toast(this.$t('new.doc50'))
      // }
    },
    getLevel() {
      this.$post(this.URL.wallet.level, {}).then((res) => {
        if (res.code == 0) {
          this.levelData = res.data;
        } else {
          this.$toast(res.message);
        }
      });
    },
    init() {
      this.$post(this.URL.member.url).then((res) => {
        if (res.code == 0) {
          let s = res.data[1].url;
          this.mykf = s;
        } else {
          this.$toast(res.message);
        }
      });
    },
    clear() {
      window.location.reload();
    },
    customerService() {
      this.$router.push("/customer");
    },
    // 弹窗
    getNotice() {
      this.showClose = false;
      this.$post(this.URL.home.notice).then((res) => {
        if (res.code == 0 && res.data.id != undefined) {
          let {imageUrl, forwardPath, waitingTime} = res.data;
          this.sShowNoticeImg = imageUrl;
          this.forwardPath = forwardPath
          this.waitingTime = waitingTime || -1
          setTimeout(() => {
            this.showClose = true;
            if (waitingTime > 0) {
              let timer = setInterval(() => {
                if (this.waitingTime == -1) {
                  clearInterval(timer)
                }
                this.waitingTime -= 1
              }, 1000)
            }
          }, 3500)

          this.isShowNotice = !!(this.sShowNoticeImg && this.sShowNoticeImg.length > 1);
        } else {
          this.showFinancial = true;
        }
      });
    },
    // 获取日期时间
    getTimeSetCookieFun() {
      var day = this.getCookieFun("day") == "" ? "" : this.getCookieFun("day");
      if (day == "") {
        this.isShowNotice = true;
        var newTime = new Date().getDate();
        this.setcookieTimeFun("day", newTime, 1);
      } else {
        var newTime = new Date().getDate();
        if (newTime > day) {
          this.isShowNotice = true;
          this.setcookieTimeFun("day", newTime, 1);
        } else {
          this.isShowNotice = false;
        }
      }
    },
    // 设置cookie时间
    setcookieTimeFun(name, value, Days) {
      value = new Date().getDate();
      var exp = new Date();
      exp.setTime(exp.getTime() + Days * 24 * 60 * 60 * 1000);
      document.cookie = name + "=" + value + ";expires=" + exp.toGMTString();
    },
    // 取出设置的cookie时间,存在就返回获取到的值,不存在返回''
    getCookieFun(c_name) {
      if (document.cookie.length > 0) {
        let c_start = document.cookie.indexOf(c_name + "=");
        if (c_start != -1) {
          c_start = c_start + c_name.length + 1;
          let c_end = document.cookie.indexOf(";", c_start);
          if (c_end == -1) {
            c_end = document.cookie.length;
          }
          return decodeURIComponent(document.cookie.substring(c_start, c_end));
        }
      }
      return "";
    },

    // 定期理财开关
    getService() {
      this.$post(this.URL.home.service_value, {code: 200}).then((res) => {
        if (res) {
          if (res.data == "true") {
            this.serviceShow = true;
          } else {
            this.serviceShow = false;
          }
        }
      });
    },
    // 理财提示
    financialReminder() {
      this.$toast(this.$t("page3.doc84"));
    },

    get_notice() {
      this.$post(this.URL.home.category, {}).then((res) => {
        if (res.code == 0) {
          this.category = res.data;
        }
      });

      this.$post(this.URL.member.message_list, {
        groupKey: "SYSTEM",
        page: 1,
        pageSize: 10,
      }).then((res) => {
        if (res.code == 0) {
          this.noticeData = res.data.list;
          // if(this.noticeData.length == 1){
          //     let arr = []
          //     this.noticeData.map(item => {
          //         for(let i = 0; i <= 1; i++){
          //             arr.push(item)
          //         }
          //     })
          //     this.noticeData = arr
          // }
        }
      });

      this.$post(this.URL.home.movie_list, {}).then((res) => {
        if (res.code == 0) {
          this.movieList = res.data;
          console.log(this.movieList);
          let len = this.movieList[2].movieList.length;
          let arr_list = this.movieList[2].movieList;
          if (len > 6) {
            let arr = [];
            arr_list.map((v, k) => {
              if (k <= 5) {
                arr.push(v);
              }
            });
            this.movieList[2].movieList = arr;
            return;
          }
        }
      });
    },
    getAds() {
      this.$post(this.URL.home.ads, {
        positionKey: "INDEX_BANNER",
      }).then((res) => {
        if (res.code == 0) {
          this.bannerData = res.data;
        }
      });
    },
    pathNotice(url, item) {
      this.$router.push({
        path: url,
        query: {
          time: item.date,
          title: item.title,
          doc: item.richText,
        },
      });
    },
    path_url(url) {
      if (url.length < 2) return;
      if (url.indexOf("http") > -1) {
        this.common.openUrl(url);
        return;
      }
      this.$router.push({
        path: url,
        query: {},
      });
    },
  },
};
</script>

<style lang="less" scoped>
.home {
  background: #311114 url("../../../assets/images/main-bg.png") no-repeat top center fixed;
  background-size: 100% 100%;
  min-height: 100vh;
  padding-bottom: 60px;
}

.head {
  padding: 6px 16px 0 10px;
  margin-bottom: 12px;

  .lang {
    display: flex;
    align-items: center;

    .la1 {
      margin-right: 0.32rem;
    }

    img {
      height: 0.4rem;
    }
  }

  .logo {
    img {
      width: 60px;
    }
  }

  .so {
    margin: 0 0.6rem;
    height: 0.64rem;
    background: #2a292f;
    border-radius: 0.34rem;
    padding: 0 0.24rem 0 0.3rem;

    input {
      font-size: 0.28rem;
      height: 0.64rem;
      width: 100%;
      background: url("../../../assets/images/ico_so2.png") no-repeat right center;
      background-size: auto 0.32rem;
      border: 0;
    }
  }

  .lang {
    img {
      height: 0.4rem;
    }
  }
}

.bg {
  background: none;
}

.videoType {
  margin-bottom: 0.4rem;

  .name {
    font-size: 0.3rem;
    font-weight: 600;
    line-height: 0.3rem;
    letter-spacing: 0.015rem;
    margin-bottom: 0.24rem;
  }

  ul {
    display: flex;
    justify-content: space-between;
    text-align: center;

    li {
      width: 32%;
      border-radius: 0.16rem;
      background: linear-gradient(140deg,
      rgba(22, 46, 105, 0.6) 33.87%,
      rgba(122, 13, 40, 0.4) 100%);
      padding: 0.4rem 0.2rem;

      img {
        height: 0.88rem;
      }

      span {
        font-size: 0.28rem;
        font-weight: 600;
        line-height: 0.28rem;
        margin-top: 0.2rem;
        display: block;
      }
    }
  }
}

.banner {
  img {
    width: 100%;
    border-radius: 18px;
  }

  .hd {
    text-align: center;
    margin-top: 0.16rem;
    height: 0.08rem;

    .swiper-hd {
      display: inline-block;
      height: 0.08rem;
      border-radius: 0.04rem;
      background: rgba(255, 255, 255, 0.2);

      /deep/ span {
        height: 0.08rem;
        background: none !important;
        display: inline-block;
        vertical-align: top;
        border-radius: 0.04rem;
        width: 0.24rem;
      }

      /deep/ .swiper-pagination-bullet-active {
        background: #fff !important;
      }
    }
  }
}

.notice {
  margin: 0.24rem 0 0 0;
  display: flex;
  background: linear-gradient(180deg, rgba(13,39,35,1) 0%, rgba(20,67,48,1) 100%);
  border: 1px solid #0b723c;
  border-radius: 10px;
  padding: 0 0.24rem;
  height: 0.72rem;

  // display: flex;
  align-items: center;

  img {
    width: 18px;
    margin-right: 10px;
  }

  /deep/ .van-icon__image {
    width: auto;
    height: 0.6rem;
  }

  > div {
    padding: 0;
  }
}

.notice-swipe {
  flex: 1;
  height: 0.72rem;
  line-height: 0.72rem;
  color: #fff;
}

.nav2 {
  display: flex;
  text-align: center;
  padding: 0.4rem 0 8px;
  flex-wrap: wrap;
  justify-content: space-between;

  li {
    width: 31.5%;
    margin-bottom: 12px;
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(30,60,58,1) 0%, rgba(13,37,37,1) 40%);
    border: 1px solid #324244;
    padding: 16px 0;
    box-shadow: 2px 6px 6px rgba(0,0,0,.3);
  }

  img {
    width: 22px;
  }

  .ico {
    margin-bottom: 10px;
  }

  .n {
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.24rem;
  }
}

/deep/ .van-popup {
  overflow: unset;
  background: none !important;
}

.no_po {
  position: relative;

  .no_po-con-box {
    max-height: 80vh;

    .no_po-con {
      animation: maxHeight 1.5s ease-in-out;
      overflow-y: auto;
      max-height: 80vh;
    }

    @keyframes maxHeight {
      from {
        max-height: 0;
      }
      to {
        max-height: 80vh;
      }
    }
  }


  .close {
    position: absolute;
    bottom: -.8rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 300000;
    width: .6rem;
    height: .6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: .02rem solid #fff;
    color: #fff;
    font-size: .24rem;

    &.noBorder {
      border: none;
    }
  }
}

.videoList {
  margin-bottom: 0.16rem;

  .line2 {
    left: 30px;
    bottom: 0;
    width: 186px !important;
    height: 5px !important;
  }

  .cname {
    align-items: center;
    color: #fff;
    margin-bottom: 0.24rem;

    .n {
      font-size: 0.32rem;
      font-weight: 600;
      line-height: 0.3rem;
      letter-spacing: 0.015rem;
    }

    .v {
      font-size: 0.24rem;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #bdbdbd;
    }

    img {
      width: 20px;
      height: 20px;
    }
  }

  .uilist {
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
    white-space: nowrap;
    display: flex;
    flex-direction: column;
  }

  .list {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;

    li {
      width: 48%;
      margin-right: 0rem;
      margin-bottom: 0.24rem;
      border-radius: 0.16rem;
      border: 1px solid rgba(18, 93, 55, .4);
      overflow: hidden;
      position: relative;
      background: #091f1f;
      padding: 8px;
      box-shadow: 2px 6px 6px rgba(0,0,0,.3);

      .nowrap-1 {
        margin-bottom: 8px;
      }

      .text-wrapper {
        margin-top: 8px;
        color: #fff;
      }

      .score-wrapper {
        margin-top: 12px;
        .score {
          color: #06c761;
        }
      }

      .like {
        width: 84px;
        height: 26px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 8px 0 8px 0;
        color: #fff;
        background: #02d080;
      }

      .pic {
        position: relative;
        width: 100%;

        img {
          border-radius: 0.16rem 0.16rem 0 0;
          width: 100%;
          height: 170px;
          object-fit: cover;
        }

        .abs {
          bottom: 0;
          left: 0;
          font-size: 0.2rem;
          display: flex;
          align-items: center;
          width: 100%;
          padding: 0.16rem;

          .v {
            flex: 1;
            display: flex;
            align-items: center;

            img {
              width: 0.2rem;
              height: 0.2rem;
              margin-right: 0.06rem;
              vertical-align: top;
            }
          }
        }

        .str {
          font-size: 0.24rem;
          position: absolute;
          right: 0;
          bottom: 0;
          background: linear-gradient(270deg,
          #0571fd 0%,
          #7b02fe 100%,
          #7b02fe 100%);
          padding: 0.08rem 0.16rem;
          border-radius: 0.24rem 0rem 0.24rem 0.24rem;

          span {
            line-height: 0.4rem;
            text-align: center;
            display: block;
          }
        }
      }

      button {
        border-radius: 0.8rem;
        background: linear-gradient(90deg, #1b5bff 0%, #c029ff 100%);
        border: 0;
        font-size: 0.24rem;
        color: #fff;
        padding: 0 0.3rem;
        height: 0.48rem;
      }

      .info {
        padding: 0.16rem;

        .title {
          font-size: 0.26rem;
          display: inline-block;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }

      .pingfen {
        margin: 0.12rem 0 0.24rem 0;
        font-size: 0.24rem;
        align-items: center;
      }

      &:last-child {
        margin-right: 0;
      }
    }
  }
}

.data-wrapper {
  margin-bottom: 20px;
  .item-wrapper {
    display: flex;

    .item {
      &:last-child {
        margin-left: 11px;
      }

      .data-content {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        padding: 10px;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .title {
          font-size: 12px;
        }

        .value {
          margin-top: 8px;
          font-size: 14px;
          font-weight: 600;
        }

        img {
          width: 75px;
          flex-shrink: 0;
        }
      }
    }

  }
  img {
    width: 100%;
  }
}
</style>
